<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui2.2.5/css/layui.css">
    <link rel="icon" href="href="${pageContext.request.contextPath}/static/libs/uiframe/frame/static/image/code.png">
    <style type="text/css">
    .layui-container {
        width: 100%;
    }
    .layui-table-cell .layui-form-checkbox[lay-skin=primary] {
        top: 6px;
        vertical-align: middle;
    }
</style>
</head>
<body class="body">
<div class="layui-container">
<div class="layui-row layui-col-space30">
<div class="layui-col-md3">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>组织机构列表</legend>
    </fieldset>
    <div style="margin-left: 10px;margin-bottom: 15px">
        <button class="layui-btn layui-btn-xs layui-btn-normal" id="org_add_btn"><i class="layui-icon"></i>新增</button>
        <button class="layui-btn layui-btn-xs layui-btn-normal" id="org_edit_btn"><i class="layui-icon"></i>编辑</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger" id="org_remove_btn"><i class="layui-icon"></i>删除</button>
    </div>
    <ul id="orglist"></ul>
</div>
<div id="usermanage" class="layui-col-md9">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>用户列表</legend>
    </fieldset>
    <div style="margin-left: 10px;">
        <button class="layui-btn layui-btn-xs layui-btn-normal" id="user_add_btn"><i class="layui-icon"></i>新增</button>
        <button class="layui-btn layui-btn-xs layui-btn-normal" id="user_activate_btn"><i class="layui-icon"></i>启用</button>
        <button class="layui-btn layui-btn-xs layui-btn-normal" id="user_deactivate_btn"><i class="layui-icon"></i>禁用</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger" id="user_remove_btn"><i class="layui-icon"></i>删除</button>
    </div>
    <table id="userlist" lay-filter="userlist" lay-even></table>
    <script type="text/html" id="userbar">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="user_edit">编辑</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="token_generate">token生成</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="role_correlate">角色分配</a>
    </script>
</div>
</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui2.2.5/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui-xtree.js"></script>
<script type="text/javascript">
    var layIndex = null,tableIns,orgId=0;
    var $, layer, table,form;
    /**
     * 关闭弹窗，同时刷新数据列表
     * @param layIndex
     */
    function closeAllLayer() {
        layer.closeAll();
        $.ajax({
            type:'get',
            url:'${pageContext.request.contextPath}/sys/user/userlist',
            dataType: "json",
            contentType:'application/json;charset=utf-8',
            success:function(data) {
                tableIns.reload({data:data});
                layIndex = null;
            },
            error: function (error){
                console.log(error);
                layIndex = null;
            }
        });
    }

    /**
     * 列表初始化
     */
    layui.use(['table','layer','tree'], function(){
        $ = layui.jquery, table = layui.table, layer = layui.layer, form = layui.form;
        var treeData = {
            elem: '#orglist'
            ,nodes:[{
                id:0,
                name: '所有机构',
                spread:true
            }]
            ,click: function(node){
                orgId = node.id;
                if(node.id != 0){
                    $("#usermanage legend").text(node.name + ' 用户列表')
                }else {
                    $("#usermanage legend").text('用户列表')
                }
                table.reload('userlist',{
                    page: {
                        curr: 1
                    }
                    ,where: {
                        orgid: orgId
                    }
                });
            }
        };

        $.ajax({
            type:'get',
            url:'${pageContext.request.contextPath}/sys/user/orglist',
            dataType: "json",
            contentType:'application/json;charset=utf-8',
            success:function(data) {
                treeData['nodes'][0]['children'] = data;
                layui.tree(treeData);
            },
            error:function (error) {
                console.log(error);
                layui.tree(treeData);
            }
        });


        /**
         * 新建组织机构按钮绑定事件
         */
        $("#org_add_btn").click(function () {
            if(layIndex != null) return;
            layIndex = layer.open({
                type: 2,
                title:'组织机构添加',
                area: ['450px', '600px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: ['${pageContext.request.contextPath}/sys/user/orgadd?parentid=' + orgId, 'no'],
                cancel: function(index, layero){
                    layIndex = null;
                    layer.close(index);
                }
            });
        });

        /**
         * 编辑组织机构按钮绑定事件
         */
        $("#org_edit_btn").click(function () {

        });

        /**
         * 删除组织机构按钮绑定事件
         */
        $("#org_remove_btn").click(function () {

        });

        /**
         * 用户列表初始化
         */
        tableIns = table.render({
            elem: '#userlist'
            ,height: 'full-120'
            ,url:'${pageContext.request.contextPath}/sys/user/userlist'
            ,cols: [[
                {checkbox: true, LAY_CHECKED: false} //默认全选
                ,{field: 'username', align:'center', title: '用户名'}
                ,{field: 'phonenumber', align:'center', title: '手机号'}
                ,{fixed: 'right', align:'center',title: '操作', toolbar: '#userbar'}
            ]]
            ,page: true //是否显示分页
            ,limits: [10, 20, 30]
            ,limit: 10 //每页默认显示的数量
        });
        /**
         * 监听用户列表复选框选择
         */
        table.on('checkbox(userlist)', function(obj){
        });
        /**
         * 用户列表操作列事件绑定
         */
        table.on('tool(userlist)', function(obj){
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'user_edit'){
                layer.msg('查看操作');
            } else if(layEvent === 'role_correlate'){
                if(layIndex != null) return;
                layIndex = layer.open({
                    type: 2,
                    title:'角色绑定',
                    area: ['460px', '420px'],
                    shade: 0,
                    shadeClose:false,
                    resize:true,
                    content: ['${pageContext.request.contextPath}/sys/user/correlaterolepage?userid=' + data['id'], 'no'],
                    cancel: function(index, layero){
                        layIndex = null;
                        layer.close(index);
                    }
                });
            } else if(layEvent === 'token_generate'){
                if(layIndex != null) return;
                layIndex = layer.open({
                    type: 2,
                    title:'token设置',
                    area: ['630px', '300px'],
                    shade: 0,
                    shadeClose:false,
                    resize:true,
                    content: ['${pageContext.request.contextPath}/sys/user/tokenmanage?userid=' + data['id'], 'no'],
                    cancel: function(index, layero){
                        layIndex = null;
                        layer.close(index);
                    }
                });
            }
        });


        /**
         * 新建用户按钮绑定事件
         */
        $("#user_add_btn").click(function () {
            if(layIndex != null) return;
            layIndex = layer.open({
                type: 2,
                title:'用户添加',
                area: ['451px', '350px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: ['${pageContext.request.contextPath}/sys/user/useradd?orgid='+orgId, 'no'],
                cancel: function(index, layero){
                    layIndex = null;
                    layer.close(index);
                }
            });
        });
        /**
         * 编辑用户按钮绑定事件
         */
        $("#user_edit_btn").click(function () {
            if(layIndex != null) return;
            var checkStatus = table.checkStatus('userlist'),userid;
            if(checkStatus.data.length != 1){
                layer.msg('一次编辑只能选择一行', {icon: 5,anim: 6});
                return;
            }
            userid = checkStatus.data[0]['id'];
            layIndex = layer.open({
                type: 2,
                title:'用户编辑',
                area: ['450px', '300px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: ['${pageContext.request.contextPath}/sys/user/useredit?userid='+userid, 'no']
            });
        });

        /**
         * 删除用户按钮绑定事件
         */
        $("#user_remove_btn").click(function () {
            var checkStatus = table.checkStatus('userlist'),userids=[];
            if(checkStatus.data.length == 0){
                layer.msg('至少选择一行', {icon: 5,anim: 6});
                return;
            }
            for(var i = 0,len = checkStatus.data.length;i < len;i++){
                userids.push(checkStatus.data[i]['id']);
            }

            $.ajax({
                type:'post',
                dataType:'json',
                url:'${pageContext.request.contextPath}/sys/user/userremove',
                contentType : "application/json;charset=UTF-8",
                data:userids.join(","),
                success:function (data) {
                    layer.msg(data.status);
                    closeLayer(layIndex);
                },
                error:function (error) {
                    console.log(error);
                }
            });
        });
    });
</script>
</body>
</html>
